<template>
  <div id="main">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="待审核" name="first">
        <div class="table-container">
          <list-table-new
            v-bind="awaitTableConfig"
            ref="tableList1"
          ></list-table-new>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已通过" name="second" lazy>
        <div class="table-container">
          <list-table-new
            v-bind="passTableConfig"
            ref="tableList2"
          ></list-table-new>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已拒绝" name="third" lazy>
        <div class="table-container">
          <list-table-new
            v-bind="refuseTableConfig"
            ref="tableList3"
          ></list-table-new>
        </div>
      </el-tab-pane>
    </el-tabs>
    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      width="40%"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <div style="height: 150px">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入拒绝原因"
          v-model="approvalContent"
        >
        </el-input>
      </div>
    </dialogPublic>
  </div>
</template>

<script>
import {
  queryAuditList,
  outStaffAudit,
} from "@/api/systemManagement/userManagement.js";
export default {
  data() {
    return {
      showtable: true,
      show: false,
      title: "拒绝原因",
      activeName: "first",
      approvalContent: "", //审核原因
      awaitTableConfig: {
        showIndex: true,
        selectionShow: true,
        showFilterBtn: false,
        showCustomBtn: false,
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getReviewList(params, sortStr);
          },
          actionList: [],
          searchArr: [
            {
              type: "input",
              label: "用户名称",
              model: "name",
              placeholder: "请输入",
            },
          ],
          queryData: {
            page: 1,
            pageSize: 15,
            approvalStatus: 0,
          },
        },
        tableMethods: {
          rowClick: (e) => {},
        },
        actionList: [
          {
            name: "同意",
            method: () => {
              this.passReview();
            },
          },
          {
            name: "拒绝",
            method: () => {
              let arr = this.$refs.tableList.getSelectData();
              if (arr != 0) {
                this.show = true;
                //this.refuseReview();
              } else {
                this.$message.warning("请选择至少一条数据");
              }
            },
          },
        ],
        column: [
          {
            label: "用户名",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "组织",
            textAlign: "center",
            prop: "orgName",
          },
          {
            label: "所属公司",
            textAlign: "center",
            prop: "appName",
          },
          {
            label: "手机号码",
            textAlign: "center",
            prop: "phone",
          },
        ],
        tableData: [],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
      },
      passTableConfig: {
        showIndex: true,
        selectionShow: false,
        showFilterBtn: false,
        showCustomBtn: false,
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getPassList(params, sortStr);
          },
          actionList: [],
          searchArr: [
            {
              type: "input",
              label: "用户名称",
              model: "name",
              placeholder: "请输入",
            },
          ],
          queryData: {
            page: 1,
            pageSize: 15,
            approvalStatus: 1,
          },
        },
        tableMethods: {
          rowClick: (e) => {},
        },
        actionList: [],
        column: [
          {
            label: "用户名",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "所属组织",
            textAlign: "center",
            prop: "orgName",
          },
          {
            label: "所属公司",
            textAlign: "center",
            prop: "appName",
          },
          {
            label: "手机号码",
            textAlign: "center",
            prop: "phone",
          },
        ],
        tableData: [],
        selectableMethod: () => {},
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
      },
      refuseTableConfig: {
        showIndex: true,
        selectionShow: false,
        showFilterBtn: false,
        showCustomBtn: false,
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getRefuseList(params, sortStr);
          },
          actionList: [],
          searchArr: [
            {
              type: "input",
              label: "用户名称",
              model: "name",
              placeholder: "请输入",
            },
          ],
          queryData: {
            page: 1,
            pageSize: 15,
            approvalStatus: -1,
          },
        },
        tableMethods: {
          rowClick: (e) => {},
        },
        actionList: [],
        column: [
          {
            label: "用户名",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "组织",
            textAlign: "center",
            prop: "orgName",
          },
          {
            label: "所属公司",
            textAlign: "center",
            prop: "appName",
          },
          {
            label: "手机号码",
            textAlign: "center",
            prop: "phone",
          },
        ],
        tableData: [],
        selectableMethod: () => {},
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
      },
    };
  },
  watch: {
    activeName: {
      handler(val) {
        switch (val) {
          case "first":
            this.$refs.tableList1.searchData();
            break;
          case "second":
            this.getPassList();
            break;
          default:
            this.getRefuseList();
            break;
        }
      },
    },
  },
  mounted() {
    //默认获取待审核列表
    this.$refs.tableList1.searchData();
  },
  methods: {
    handleClick(tab, event) {
      //this.$refs.tableList.setTableHeight();
    },
    //获取待审核列表
    getReviewList(params, sortStr) {
      let queryData = Object.assign({}, params);
      // if (sortStr.length > 0) {
      //   queryData.orders = sortStr;
      // }
      queryAuditList(queryData).then((res) => {
        this.$set(this.awaitTableConfig, "tableData", res.data.list);
        this.$set(this.awaitTableConfig, "totalNumber", res.data.total);
      });
    },
    //获取已通过列表
    getPassList(params, sortStr) {
      let queryData = Object.assign(
        { page: 1, pageSize: 15, approvalStatus: 1 },
        params
      );
      // if (sortStr.length > 0) {
      //   queryData.orders = sortStr;
      // }
      queryAuditList(queryData).then((res) => {
        this.$set(this.passTableConfig, "tableData", res.data.list);
        this.$set(this.passTableConfig, "totalNumber", res.data.total);
      });
    },
    //获取已拒绝列表
    getRefuseList(params, sortStr) {
      let queryData = Object.assign(
        { page: 1, pageSize: 15, approvalStatus: -1 },
        params
      );
      // if (sortStr.length > 0) {
      //   queryData.orders = sortStr;
      // }
      queryAuditList(queryData).then((res) => {
        this.$set(this.refuseTableConfig, "tableData", res.data.list);
        this.$set(this.refuseTableConfig, "totalNumber", res.data.total);
      });
    },
    //弹框确认
    doSubmit() {
      this.refuseReview();
    },
    //审核通过
    passReview() {
      let arr = this.$refs.tableList1.getSelectData();
      if (arr != 0) {
        let data = arr.map((item) => {
          return item.id;
        });
        const params = {
          approvalContent: "同意",
          approvalStatus: 1,
          outStaffApplyId: data,
        };
        outStaffAudit(params).then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功");
            this.getReviewList();
          }
        });
      } else {
        this.$message.warning("请选择至少一条数据");
      }
    },
    //审核拒绝
    refuseReview() {
      let arr = this.$refs.tableList1.getSelectData();
      let data = arr.map((item) => {
        return item.id;
      });
      const params = {
        approvalContent: this.approvalContent,
        approvalStatus: -1,
        outStaffApplyId: data,
      };
      outStaffAudit(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getReviewList();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  height: 100%;
  .table-container {
    width: 100%;
    height: 100%;
  }
}
/deep/.el-tabs__header {
  padding: 20px 0px 0px 20px;
}
/deep/.el-tabs {
  height: 100% !important;
}
/deep/.el-tabs .el-tabs__content {
  height: calc(100% - 81px);
  padding: 20px;
}
/deep/.el-tabs .el-tab-pane {
  height: 100%;
}
</style>
